<template>
  <div>
    <Header :activIndex = "2"></Header>
    <div class="content">
      <div class="nav"> <myBread :breadList="breadList"></myBread></div>
      <div class="contents">
        <div class="pad">
          <div class="title"> {{this.cData.data1}}
            <!-- <div class="signSpan" @click="signSpanClick"><i class="sign"></i><span>我要报名</span> </div> -->
          </div>
          <detailTable :cText="cText" :cData="cData" :cCol="cCol"></detailTable>

          <div class="etabs">
            <div class="fixed" v-if='posf'>
                <div class="centers">
                    <el-tabs v-model="activeName" @tab-click="handleClick" >
                    <el-tab-pane label="标的基本情况" name="first" v-if="p_Arr.indexOf( 0 )  != -1"></el-tab-pane>
                    <el-tab-pane label="转让方简况" name="second" v-if="p_Arr.indexOf( 1 )  != -1"></el-tab-pane>
                    <el-tab-pane label="交易条件与受让方资格条件" name="third" v-if="p_Arr.indexOf( 3 )  != -1"></el-tab-pane>
                    <el-tab-pane label="信息披露期" name="fourth" v-if="p_Arr.indexOf( 4 )  != -1"> </el-tab-pane>
                    <el-tab-pane label="竞价方式" name="ninth" v-if="p_Arr.indexOf( 5 )  != -1"></el-tab-pane>
                    <el-tab-pane label="交易公告" name="fifth" v-if="p_Arr.indexOf( 6 )  != -1"></el-tab-pane>
                    <el-tab-pane label="交易须知" name="sixth" v-if="p_Arr.indexOf( 7 )  != -1"></el-tab-pane>
                    <el-tab-pane label="附件下载" name="seventh" v-if="p_Arr.indexOf( 8 )  != -1"></el-tab-pane>                                         
                    </el-tabs> 
                </div>
            </div>

            <el-tabs v-model="activeName" @tab-click="handleClick">
              <!-- <el-tab-pane label="标的基本情况" name="first">
                  <firstTable :cText="cText" :cData="firstInfo" :cCol="cCol"></firstTable>
              </el-tab-pane> -->
              <el-tab-pane label="标的基本情况" name="first" v-if="p_Arr.indexOf( 0 )  != -1">
                  <firstTable :cText="cText" :cData="firstInfo" :cCol="cCol"></firstTable>
              </el-tab-pane>
              <el-tab-pane label="转让方简况" name="second" v-if="p_Arr.indexOf( 1 )  != -1">
                  <secondTable type = '2' :cText="cText" :cData="secondList" :cCol="cCol"></secondTable>
              </el-tab-pane>
              <el-tab-pane label="交易条件与受让方资格条件" name="third" v-if="p_Arr.indexOf( 3 )  != -1">
                  <thirdTable :cText="cText" :cData="BasicInfoList" :cCol="cCol"></thirdTable>
              </el-tab-pane>
              <el-tab-pane label="信息披露期" name="fourth" v-if="p_Arr.indexOf( 4 )  != -1">
                  <fourthTable type="2" :cText="cText" :cData="BasicInfoList" :cCol="cCol"></fourthTable>
              </el-tab-pane>
              <el-tab-pane label="竞价方式" name="ninth" v-if="p_Arr.indexOf( 5 )  != -1">
                  <ninthTable type="2" :cText="cText" :cData="BasicInfoList" :cCol="cCol"></ninthTable>
              </el-tab-pane>                        
              <el-tab-pane label="交易公告" name="fifth" v-if="p_Arr.indexOf( 6 )  != -1">
                  <fifthTable cType="1" :cData="BasicInfoList" :cCol="BasicInfoList"></fifthTable>
              </el-tab-pane>
               <el-tab-pane label="交易须知" name="sixth" v-if="p_Arr.indexOf( 7 )  != -1">
                  <fifthTable cType="2" :cData="BasicInfoList" :cCol="BasicInfoList"></fifthTable>    
              </el-tab-pane>
              <el-tab-pane label="附件下载" name="seventh" v-if="p_Arr.indexOf( 8 )  != -1">
                   <sixthTable  :cData="cData" :cCol="cCol"></sixthTable>  
              </el-tab-pane>                                         
            </el-tabs>
          </div>
        </div>
      </div>
    </div>

    <el-dialog title="基本信息" :visible.sync="dialogTableVisible">
      <el-form :model="form" style="width:60%" :rules="rules" ref="form">
        <el-form-item label="联系人" :label-width="formLabelWidth"  prop="name">
          <el-input v-model="form.name" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth" prop="phone">
          <el-input v-model="form.phone" autocomplete="off" ></el-input>
        </el-form-item> 
        <el-form-item label="留言" :label-width="formLabelWidth" prop="mess">
          <el-input type="textarea" v-model="form.mess" ></el-input>
        </el-form-item>              
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import myBread from "~/components/bread";
import detailTable from "~/components/project/detailTable";
import firstTable from "~/components/project/asset_firstTable";
// import secondTable from "~/components/project/realtor_secondTable";
import secondTable from "~/components/project/secondTable";
import thirdTable from "~/components/project/asset_thirdTable";
import fourthTable from "~/components/project/fourthTable";
import fifthTable from "~/components/project/fifthTable";
import sixthTable from "~/components/project/sixthTable";
import eighthTable from  "~/components/project/eighthTable";
import ninthTable from "~/components/project/ninthTable";
import tenthTable from  "~/components/project/tenthTable";
import { getNew, getSubjectmaininfoDes } from "~/request/api";
import { getDetail, setDetail } from "~/store/auth";
import Header from "~/components/header"
export default { 
  components: {
    Header,
    myBread,
    detailTable,
    firstTable,
    secondTable,
    thirdTable,
    fourthTable,
    fifthTable,
    sixthTable,
    eighthTable,
    ninthTable,
    tenthTable
  },
  data() {
    return {
      breadList: [Array],
      firstInfo: {},
      secondList: {},
      thirdList: {},
      BasicInfoList: {},
      p_Arr: [],
      rules: {
          name: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
          phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
          mess: [{ required: true, message: '请输入留言', trigger: 'blur' }]
      },      
      form:{
        name:"",
        phone:"",
        mess:""
      },
      formLabelWidth:'120px',
      dialogTableVisible:false,
      posf:false,
      activeName: "first",
      headerIndex: 2,
      datas: [],
      html: ``,
      cText: [
        {
          text1: "标的名称",
          text2: "标的编号"
        },
        {
          text1: "信息披露起始日期",
          text2: "信息披露结束日期"
        },
        {
          text1: "转让底价",
          text2: "资产所在地区"
        },
        {
          text1: "标的是否存在抵押情况",
           text2: "权利人是否有意向行使优先购买"
        },
        {
          text1: "联系人及电话"
        }
      ],
      cCol: [
        {
          name1: "data1",
          name2: "data2"
        },
        {
          name1: "data3",
          name2: "data4"
        },
        {
          name1: "data5",
          name2: "data6"
        },
        {
          name1: "data7",
          name2: "data8"
        },
        {
          name1: "data9"
        }
      ],
      cData: {
        data1: "",
        data2: "",
        data3: "",
        data4: "",
        data5: "",
        data6: "",
        data7: "",
        data8: ""
      }
    };
  },
  methods: {
    getBreadcrumb(title) {
        let matched = this.$route.matched;
        // console.log(matched)
        matched[0].meta.title = title;
        matched = [
            { path: "/", meta: { title: "首页" } },
            { path: "/projectAnnouncement", meta: { title: "项目" } }
        ].concat(matched);
        this.breadList = matched;
    },  
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },   
    signSpanClick(){
       this.dialogTableVisible = true
    },
    handleClick(tab, event) {
      document.documentElement.scrollTop = '400'
    },
    getRentalInfo () {
      let subjectId = this.$route.query.id
      this.get(`/api/subjectmaininfo/${subjectId}`).then(res => {
          this.rentalInfo = res.data
          console.log(89999)
          console.log(this.rentalInfo)
          this.firstInfo = {
            fc1List:res.data.realEstates,
            fc2List:res.data.ownershipCertificates,
            sbwzList:res.data.equipmentSupplies,
            jdcList:res.data.motorVehicles,
            fmwzList:res.data.finesMaterials,
            zqList:res.data.claims,
            zjgcList:res.data.constructeProgress,
            zscqList:res.data.intellectualProperties,
            qtList:res.data.others,
            domainsPub:res.data.assetTransferBasicInfo
          }

          this.secondList = {
              fList:res.data.transferorLegalPersons,
              ffList:res.data.transferorUnincorporatedSocieties,
              zList:res.data.transferorNaturals,                     
          }
          this.thirdList = res.data.deliveryAddress
          this.BasicInfoList = res.data.assetTransferBasicInfo
          let mainInfo = res.data.subjectMainInfoDTO
          this.cData = {
            data1: mainInfo.subjectName,
            data2: mainInfo.subjectNum,
            data3: mainInfo.disclosureStartDate,
            data4: mainInfo.disclosureEndDate,
            data5: mainInfo.transferReservePrice,
            data6: mainInfo.subjectCompanyArea,
            data7: mainInfo.isMortgage,
            data8: mainInfo.isPriorityPurchase,
            data9: mainInfo.contactInfo,
          }
          this.getBreadcrumb(mainInfo.subjectName);
          this.p_Arr = JSON.parse(res.data.subjectMainInfoDTO.disclosure) || []
        })
        .catch(err => {
          console.log(err)
        })
    },
    scrollDs() {
        this.scroll = window.scrollY
        this.scroll > 500?this.posf = true:this.posf = false;
    }
  },
    mounted () {//给window添加一个滚动滚动监听事件
        window.addEventListener('scroll', this.scrollDs)
        document.documentElement.scrollTop = 0;
    },  
  created() {
    this.datas = getDetail("project_dname");
    
    // this.getList();
    this.getRentalInfo();
  }
};
</script>

<style lang="scss" scoped>
.contents {
  text-align: left;
  margin-top: 20px;
  border: solid 1px #cccccc;
  min-height: 890px;
}
.content .title {
  font-family: SimHei;
  font-size: 24px;
  color: #333333;
  margin-bottom: 20px;
}
.pad {
  padding: 25px 20px;
}
.mar {
  margin-left: 40px;
}
.p_text {
  display: inline-block;
  font-family: SimHei;
  font-size: 14px;
  color: #333333;
  margin-top: 20px;
}
.line_div {
  width: 1162px;
  border-bottom: solid 2px #db1004;
  text-align: center;
  line-height: 55px;
  margin: 0 auto;
  margin-top: 18px;
}
.line_div p {
  font-family: SimHei;
  font-size: 24px;
  color: #db1004;
}
.showContent {
  margin-top: 25px;
  text-align: left;
}
.showWord {
  width: 700px;
  margin: 0 auto;
  margin-top: 10px;
}
.showWord_title {
  font-family: SimHei;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 20px;
}
.min_width {
  min-width: 100px;
  text-indent: 0em;
  display: inline-block;
  text-align: left;
}
.under-line {
  border-bottom: solid 1px black;
  display: inline-block;
  line-height: 30px;
  text-align: left;
}
.showtext_title {
  font-size: 14px;
  line-height: 50px;
}
.showtext_title p {
  text-indent: 2em;
}
.showtext_right {
  text-align: right;
}
.html_content {
  padding: 20px 20px 60px 20px;
}
.etabs{
    margin-top: 10px
}
.fixed{position: fixed;top:0;left: 0;width: 100%;z-index: 9999;}
.fixed .centers{width: 1159px; margin:0 auto}
// .content /deep/ .el-tabs__nav-scroll{padding-left:0 !important }

</style>